<template>
  <van-popup v-model="show" @close="closePopup" position="top" :style="{ height: '50%' }">
    <div class="popup-wrapper">
      <template v-if="titleNumber === 0">
        <van-dropdown-menu>
          <!-- {{ titleArr[titleNumber].children }} -->
          <!-- <template v-for="item in titleArr[titleNumber]"> -->
          <!-- {{ item.children }} -->
          <van-dropdown-item v-model="dropdownMsg" :options="titleArr[titleNumber].children" />
          <!-- </template> -->
        </van-dropdown-menu>
      </template>
      <template v-if="titleNumber === 1">品牌</template>
      <template v-if="titleNumber === 2">价格</template>
      <template v-if="titleNumber === 3">
        <h2>车龄</h2>
        <van-slider v-model="carStatus.carAge" :step="2" />

        <h2>里程</h2>
        <van-slider v-model="carStatus.mileage" :step="3" />
        <van-button @click="handleCartStatusClick">查看全部车辆</van-button>
      </template>
      <template v-if="titleNumber === 4">筛选</template>
    </div>
  </van-popup>
</template>

<script>
export default {
  data() {
    return { show: false, dropdownMsg: 'id' }
  },
  watch: {
    showPopup(v) {
      console.log(v, 'v----------')
      this.show = v
    },
  },
  props: {
    showPopup: {
      type: Boolean,
    },
    titleNumber: {
      type: Number,
    },
    carStatus: {
      type: Object,
    },
    smartIndex: {
      type: Number,
    },
    titleArr: {
      type: Array,
    },
  },
  methods: {
    closePopup() {
      // 在关闭弹出框的时候，子父传参数
      this.$emit('closePopup')
    },
    handleSmartClick(item, i) {
      this.$emit('smartClick', { item, i })
    },
    handleCartStatusClick() {
      this.$emit('statusClick')
    },
  },
}
</script>

<style></style>
